<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form :inline="true" class="form-inline">
        <el-button v-waves class="filter-item" type="primary" icon="el-icon-edit" @click="handleAddAlertRule">新增规则</el-button>
        <el-button v-waves class="filter-item" type="success" icon="el-icon-search" @click="handleSearchAlertRuleList">查询规则</el-button>
      </el-form>

      <el-table :data="alertRuleList" border style="width: 100%" >
        <el-table-column prop="ruleId" label="规则ID" width=""/>
        <el-table-column prop="describe" label="规则描述" width=""/>
        <el-table-column prop="platformName" label="平台名称" width=""/>
        <el-table-column prop="level" label="级别" width=""/>
        <el-table-column prop="env" label="部署环境" width=""/>
        <el-table-column prop="queryString" label="查询条件" width=""/>
        <el-table-column prop="jobPeriodSeconds" label="任务周期(秒)" width=""/>
        <el-table-column prop="statSecondsAgo" label="统计最近时间范围(秒)" width=""/>
        <el-table-column prop="triggerCount" label="触发报警条件" width=""/>
        <el-table-column prop="problemMinCount" label="到达故障状态次数" width=""/>
        <el-table-column prop="healthMinCount" label="到达故障恢复次数" width=""/>
        <!--<el-table-column prop="emails" label="报警邮箱" width=""></el-table-column>-->
        <el-table-column prop="enable" label="是否生效" width="">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.enable" disabled/>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="240" >
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="handleEditAlertRule(scope.row)">编辑</el-button>
            <el-button type="success" size="mini" @click="handleCopyAlertRule(scope.row)">复制</el-button>
            <el-button type="danger" size="mini" @click="handleDeleteAlertRule(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog :visible.sync="editFormVisible" :title="editFormTitle" :close-on-click-modal="false" top="2vh">
        <el-form ref="editForm" :rules="rules" :model="tempAlertRule" :inline-message="true" label-position="left" label-width="200px">
          <el-form-item label="规则ID" prop="ruleId">
            <el-input v-model="tempAlertRule.ruleId" :disabled="ruleIdDisabled" placeholder="规则ID" style="width: 400px;"/>
          </el-form-item>
          <el-form-item label="规则描述" prop="describe">
            <el-input v-model="tempAlertRule.describe" placeholder="规则描述" style="width: 400px;"/>
          </el-form-item>
          <el-form-item label="平台名称" prop="platformName">
            <el-select v-model="tempAlertRule.platformName" placeholder="平台名称" style="width: 400px" class="filter-item">
              <el-option v-for="item in platformOptions" :key="item.name" :label="item.name===''?'全部':item.describe+'('+item.name+')'" :value="item.name===''?'':item.name"/>
            </el-select>
          </el-form-item>
          <el-form-item label="级别" prop="level">
            <el-select v-model="tempAlertRule.level" placeholder="级别" style="width: 400px" class="filter-item" >
              <el-option v-for="item in levelOptions" :key="item" :label="item" :value="item"/>
            </el-select>
          </el-form-item>
          <el-form-item label="部署环境" prop="env">
            <el-select v-model="tempAlertRule.env" placeholder="部署环境" style="width: 400px" class="filter-item" >
              <el-option v-for="item in envOptions" :key="item" :label="item" :value="item"/>
            </el-select>
          </el-form-item>
          <el-form-item label="查询条件" prop="queryString">
            <el-input v-model="tempAlertRule.queryString" :rows="4" type="textarea" placeholder="查询条件" style="width: 400px;"/>
          </el-form-item>
          <el-form-item label="报警邮箱" prop="emails">
            <el-input v-model="tempAlertRule.emails" :rows="4" placeholder="报警邮箱,多个用逗号分隔" type="textarea" style="width: 400px;"/>
          </el-form-item>
          <el-form-item label="企业微信" prop="qywxEmails">
            <el-input v-model="tempAlertRule.qywxEmails" :rows="4" placeholder="企业微信邮箱,多个用逗号分隔" type="textarea" style="width: 400px;"/>
          </el-form-item>
          <el-form-item label="任务周期(秒)" prop="jobPeriodSeconds">
            <el-input-number v-model="tempAlertRule.jobPeriodSeconds" :step="10" :min="10" :max="86400" label="时间间隔周期(秒)" size="small" style="width: 160px;"/> 秒
          </el-form-item>
          <el-form-item label="统计最近时间范围(秒)" prop="statSecondsAgo">
            <el-input-number v-model="tempAlertRule.statSecondsAgo" :step="10" :min="10" :max="86400" label="时间间隔周期(秒)" size="small" style="width: 160px;"/> 秒
          </el-form-item>
          <el-form-item label="触发报警条件" prop="triggerCount">
            <el-input-number v-model="tempAlertRule.triggerCount" :step="1" :min="1" :max="9999" label="触发报警次数" size="small" style="width: 120px;"/> 条及以上
          </el-form-item>
          <el-form-item label="到达故障状态" prop="problemMinCount">
            <el-input-number v-model="tempAlertRule.problemMinCount" :step="1" :min="0" :max="9999" label="进入故障状态所需达到的连续触发报警次数" size="small" style="width: 120px;"/> 次及以上。（连续触发报警，进入故障状态。设置0时不启用)
          </el-form-item>
          <el-form-item label="到达健康状态" prop="healthMinCount">
            <el-input-number v-model="tempAlertRule.healthMinCount" :step="1" :min="0" :max="9999" label="进入健康状态所需达到的连续正常次数" size="small" style="width: 120px;"/> 次及以上。（在故障状态时，连续正常次数后发送恢复通知）
          </el-form-item>
          <el-form-item label="是否生效" prop="enable">
            <el-switch v-model="tempAlertRule.enable"/>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="editFormVisible = false">取 消</el-button>
          <el-button v-loading.fullscreen.lock="fullscreenLoading" type="primary" @click="handleSaveAlertRule">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import waves from '@/directive/waves'
import { searchAlertRuleList, saveAlertRule, deleteAlertRule, searchPlatformList } from '@/api/settings.js'
export default {
  name: 'Settings',
  directives: { waves },
  components: { },
  data() {
    return {
      fullscreenLoading: false,
      editFormVisible: false,
      editFormTitle: '',
      alertRuleList: [],
      platformOptions: [],
      envOptions: ['dev', 'test', 'pre', 'product'],
      levelOptions: ['L0', 'L1', 'L2', 'L3'],
      ruleIdDisabled: false,
      tempAlertRule: {
        ruleId: '',
        platformName: '',
        level: 'L3',
        env: 'product',
        queryString: '',
        emails: '',
        qywxEmails: '',
        jobPeriodSeconds: 60,
        triggerCount: 1,
        describe: '',
        enable: true,
        statSecondsAgo: 60,
        problemMinCount: 0,
        healthMinCount: 0
      },
      rules: {
        ruleId: [
          { required: true, message: '请输入规则ID', trigger: 'blur' }
        ],
        describe: [
          { required: true, message: '请输入规则描述', trigger: 'blur' }
        ],
        platformName: [
          { required: true, message: '请选择一个平台', trigger: 'blur' }
        ],
        env: [
          { required: true, message: '请选择部署环境', trigger: 'blur' }
        ],
        queryString: [
          { required: true, message: '请填写ES-queryString查询语句', trigger: 'blur' }
        ],
        // emails: [
        //   { required: true, message: '请填写报警邮箱', trigger: 'blur' }
        // ],
        jobPeriodSeconds: [
          { required: true, message: '请填写时间间隔周期', trigger: 'blur' },
          { type: 'number', message: '时间间隔必须为数字值' }
        ],
        triggerCount: [
          { required: true, message: '请填写触发报警条件次数', trigger: 'blur' },
          { type: 'number', message: '触发报警条件次数必须为数字值' }
        ],
        statSecondsAgo: [
          { required: true, message: '请填写统计开始时间', trigger: 'blur' },
          { type: 'number', message: '统计开始时间必须为数字值' }
        ]
      }
    }
  },
  created() {
    searchPlatformList().then(response => {
      if (response.code === '0000') {
        this.platformOptions = response.data
      }
    })
    this.handleSearchAlertRuleList()
  },
  methods: {
    handleSearchAlertRuleList() {
      searchAlertRuleList().then(response => {
        if (response.code === '0000') {
          this.alertRuleList = response.data
        }
      })
    },
    handleEditAlertRule(row) {
      this.editFormVisible = true
      this.editFormTitle = '编辑规则'
      this.ruleIdDisabled = true
      this.tempAlertRule.ruleId = row.ruleId
      this.tempAlertRule.platformName = row.platformName
      this.tempAlertRule.level = row.level
      this.tempAlertRule.env = row.env
      this.tempAlertRule.queryString = row.queryString
      this.tempAlertRule.emails = row.emails
      this.tempAlertRule.qywxEmails = row.qywxEmails
      this.tempAlertRule.jobPeriodSeconds = row.jobPeriodSeconds
      this.tempAlertRule.describe = row.describe
      this.tempAlertRule.enable = row.enable
      this.tempAlertRule.triggerCount = row.triggerCount
      this.tempAlertRule.statSecondsAgo = row.statSecondsAgo
      this.tempAlertRule.problemMinCount = row.problemMinCount
      this.tempAlertRule.healthMinCount = row.healthMinCount
    },
    handleCopyAlertRule(row) {
      this.handleEditAlertRule(row)
      this.editFormTitle = '新增规则'
      this.ruleIdDisabled = false
      this.tempAlertRule.ruleId = ''
    },
    handleAddAlertRule() {
      this.editFormVisible = true
      this.ruleIdDisabled = false
      this.editFormTitle = '新增规则'
      this.tempAlertRule = {
        ruleId: '',
        platformName: '',
        level: 'L3',
        env: 'product',
        queryString: '',
        emails: '',
        qywxEmails: '',
        jobPeriodSeconds: 60,
        triggerCount: 1,
        describe: '',
        enable: true,
        statSecondsAgo: 60,
        problemMinCount: 0,
        healthMinCount: 1
      }
    },
    handleDeleteAlertRule(row) {
      this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.tempAlertRule.ruleId = row.ruleId
        this.fullscreenLoading = true
        deleteAlertRule(this.tempAlertRule).then(response => {
          if (response.code === '0000') {
            this.$alert('删除报警规则成功!', '', {
              confirmButtonText: '确定',
              callback: action => {
                this.handleSearchAlertRuleList()
              }
            })
          } else {
            this.$message.error('error:' + response.msg)
          }
          this.fullscreenLoading = false
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleSaveAlertRule() {
      this.$refs['editForm'].validate((valid) => {
        if (valid) {
          this.fullscreenLoading = true
          saveAlertRule(this.tempAlertRule).then(response => {
            if (response.code === '0000') {
              this.$alert('保存报警规则成功!', '', {
                confirmButtonText: '确定',
                callback: action => {
                  this.handleSearchAlertRuleList()
                }
              })
              this.editFormVisible = false
            } else {
              this.$message.error('error:' + response.msg)
            }
            this.fullscreenLoading = false
          })
        }
      })
    }
  }
}
</script>
<style>
</style>

